<template>
    <div class="captcha_box">
        <div>
            <van-nav-bar title="" left-text="" right-text="" left-arrow @click-left="back" />
        </div>

        <van-cell class="text" :border="false" center title="修改登录密码" label="为了您的帐号安全，请先验证旧密码" />

        <div class="inputBox">

            <van-form @submit="onSubmit">
            <!--带密码可见功能的密码输入框-->
                <password-field v-model="oldpassword"  placeholder="请输入旧登录密码"></password-field>
                <div class="btn">
                    <van-button  round color="#ff7b57" block type="info" native-type="submit" size="large">下一步</van-button>
                    <div class="forgotPassword" @click="forgotPassword">忘记密码？</div>
                </div>
            </van-form>
        
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
import PasswordField from "../../components/setting/ComAccountSecurity/ComPass.vue";

// 引入登录验证密码axios
import { userAndPwd } from "../../https/loginApi";

Vue.use(Toast);
export default {
    name: "ChangeLoginPassword",
    components: {
        PasswordField,
      },
    data(){
        return{
            oldpassword:'',//当前输入框的值
        }
    },
    methods:{
        back() {
            this.$router.go(-1)
        },


        onSubmit(){
            console.log('oldpassword:', this.oldpassword)

            //先从vuex获取账号
            let phoneNum=this.$store.state.userNumber
            //将账号和旧密码通过登录axios发送给后端，由后端验证
            userAndPwd(phoneNum, this.oldpassword)
            .then((res) => {
                console.log('验证成功', res)

                let that=this
                Toast({
                    message: '验证成功!',
                    duration: 1000,
                    onClose() {
                        that.$router.push({ path:'/setnewpassword'})  //这样用this将会指向toast  ，所以用that替代this将指向sub
                    }
                })
            })
            .catch((err) => {
                console.log(err)
                Toast.fail('账号或密码错误!');
            })
        },

        forgotPassword(){
            this.$router.push({ path:'/ResetPassword/:number'})
        }
        
    }
}
</script>

<style scoped>
    .text{
        font-size: 24px;
    }
    .btn{
    margin: 80px auto ;
    }
    .inputBox{
        margin: 50px auto ;
        width: 92%;
    }
.forgotPassword{
    margin: 25px auto;
    text-align: center;
    color: #797979;
    font-size: 14px;
}

</style>
